iT邦幫忙

2022 iThome 鐵人賽

DAY 6
0

今天要做右上角的導覽行,hover後導覽列會向左伸展,並將內容物依序展現出來,內容物hover後會切換顏色以表示選取,在第三天的時候有提到animation動畫,今天則是要來說一下transition搭配hover的轉場效果。

筆記區

transition和animation有幾個相似的地方,像是delay(延遲)、duration(過場時間)、timing-function(配速),不同地放在transition-property,transition-property是寫hover後會改變的屬性。
※transition也是有速寫法。

一、延伸效果

transition這邊要填寫會改變的屬性以及秒數和其他所想表現的設定(延遲、配速),而在hover{}裡面設定之後要延伸的長寬,這邊示範改變的是寬度,當然也可以改變長寬的設定。
codepen點這
圖片

二、隱藏圖示

要把溢出來的東西隱藏起來,就要使用overflow: hidden,這樣展開的時候看起來滑順很多。
codepen點這
圖片

三、銷聲匿跡

在圖示上加個hover就可以更換顏色,在點擊圖示將他設定為不會因為超連結造訪關係而變色(color: inherit),取消底線則是 text-decoration: none。
codepen點這
圖片

成果展示

圖片

參考資料

自學成功道-CSS Transition屬性的4個操作
W3Schools-CSS Transition
transitionMDN Web Docs -CSS
CSS3轉場‧CSS3動畫快速入門


上一篇
Day05 | CSS之transform:rotate
下一篇
Day07 | CSS之font-family
系列文
30天的網頁學習30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言